<template>
	<div id="app">
		<!-- 头部导航 -->
		<header class="header">
			<el-row>
				<el-col :span="24">
					<el-menu default-active="5" class="el-menu-demo" mode="horizontal" @select="">
						<router-link to="Aindex"><el-menu-item index="">模块1</el-menu-item></router-link>
						<router-link to="Bindex"><el-menu-item index="">模块2</el-menu-item></router-link>
						<router-link to="Cindex"><el-menu-item index="">模块3</el-menu-item></router-link>
					</el-menu>
				</el-col>
			</el-row>
		</header>
		<main>
			<router-view ></router-view>
		</main>
	</div>
</template>

<script>
	import Vue from 'vue'
	import Element from 'element-ui'
	import 'element-ui/lib/theme-default/index.css'

	Vue.use(Element)

	export default {
		name: 'app',
		data: function() {
			return {
				active: true
			}
		}
	}
</script>

<style>
	body {
		margin: 0;
	}
	#app {
		min-width: 1200px;
		margin: 0 auto;
		font-family: "Helvetica Neue", "PingFang SC", Arial, sans-serif;
	}
	header {
		z-index: 1000;
		min-width: 1200px;
		transition: all 0.5s ease;
		border-top: solid 4px #3091F2;
		background-color: #fff;
		box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
		margin-bottom: 20px;
	}
	header.header-fixed {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
	}
	header .el-menu-demo {
		padding-left: 300px!important;
	}
	main {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		min-height: 800px;
		border: solid 40px #E9ECF1;
		background-color: #FCFCFC;
	}
	.main-left {
			text-align: center;
			width: 200px;
			float: left;
	}
	.main-right {
			-webkit-box-flex: 1;
			-ms-flex: 1;
			flex: 1;
			background-color: #fff;
			padding: 50px 70px;
	}
	.el-menu {
		background-color: transparent!important;
	}
	.mytitle {
		font-size: 18px;
		font-family: "微软雅黑"!important;
		font-weight: 700;
	}
</style>